<template>
  <view class="woods-slider">
    <view class="slider-container" ref="sliderContainer">
      <view class="slider-track" :style="{ width: '100%' }"></view>
      <view class="slider-thumb"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
        @mousedown="onMouseDown"
        :style="{ left: thumbPosition + 'px' }">
        <image v-if="verified" src="@/static/check.png"/>
        <image v-else src="@/static/right.png"/>
      </view>
      <view v-if="verified" class="message verified-message">验证成功！</view>
      <view v-else class="message tip-message">向右滑动验证</view>
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      containerWidth: 0,
      thumbPosition: 0,
      maxThumbPosition: 0,
      verified: false,
      startX: 0,
      thumbWidth: 50
    };
  },
  
  mounted() {
    this.calculateDimensions();
    window.addEventListener('resize', this.calculateDimensions);
  },
  
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateDimensions);
  },
  
  methods: {
    calculateDimensions() {
      this.$nextTick(() => {
        const container = this.$refs.sliderContainer;
        if (container) {
          // 使用 getBoundingClientRect 获取更准确的尺寸
          const rect = container.$el ? container.$el.getBoundingClientRect() : container.getBoundingClientRect();
          this.containerWidth = rect.width || 300;
          this.maxThumbPosition = this.containerWidth - this.thumbWidth;
          console.log('容器宽度:', this.containerWidth, '最大位置:', this.maxThumbPosition);
        }
      });
    },
    
    sliderReset() {
      this.thumbPosition = 0;
      this.verified = false;
      console.log('重置滑块');
    },
      
    onTouchStart(event) {
      this.startX = event.touches[0].clientX - this.thumbPosition;
    },
    
    onTouchMove(event) {
      if (!this.verified) {
        event.preventDefault();
        const currentX = event.touches[0].clientX;
        const moveX = currentX - this.startX;
        
        if (moveX >= 0 && moveX <= this.maxThumbPosition) {
          this.thumbPosition = moveX;
        } else if (moveX > this.maxThumbPosition) {
          this.thumbPosition = this.maxThumbPosition;
          this.verified = true;
          console.log('完成验证');
		  this.$emit('vertify',true);
        }
      }
    },
    
    onTouchEnd() {
      if (!this.verified) {
        this.thumbPosition = 0;
      }
    },
    
    onMouseDown(event) {
      this.startX = event.clientX - this.thumbPosition;
      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.onMouseUp);
    },
    
    onMouseMove(event) {
      if (!this.verified) {
        event.preventDefault();
        const currentX = event.clientX;
        const moveX = currentX - this.startX;
        
        if (moveX >= 0 && moveX <= this.maxThumbPosition) {
          this.thumbPosition = moveX;
        } else if (moveX > this.maxThumbPosition) {
          this.thumbPosition = this.maxThumbPosition;
          this.verified = true;
          this.$emit('vertify');
        }
      }
    },
    
    onMouseUp() {
      if (!this.verified) {
        this.thumbPosition = 0;
      }
      document.removeEventListener('mousemove', this.onMouseMove);
      document.removeEventListener('mouseup', this.onMouseUp);
    },
  }
};
</script>

<style lang="scss" scoped>
$slider-height: 90rpx;
$thumb-width: 50px;

.slider-container {
  position: relative;
  width: 100%;
  height: $slider-height;
  border: 1px solid #ccc;
  border-radius: 50rpx;
  overflow: hidden;
  margin: 0 auto;
  
  .slider-track {
    position: absolute;
    top: 0;
    left: 0;
    height: $slider-height;
    background-color: #eee;
    width: 100%;
  }
  
  .slider-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: $thumb-width;
    height: $slider-height;
    background-color: #fff;
    color: white;
    text-align: center;
    line-height: $slider-height;
    cursor: pointer;
    border-radius: 5px;
    z-index: 2;
    
    image {
      width: 30px;
      height: 30px;
    }
  }
  
  .message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: $slider-height;
    color: white;
    text-align: center;
    line-height: $slider-height;
  }
  
  .verified-message {
    background-color: #4CAF50;
  }
  
  .tip-message {
    background-color: #ccc;
  }
}

.btn {
  width: 300px;
  margin-top: 30px;
}
</style>